<template>
    <div>
        <div class="select-box">
            <el-form :inline="true" :model="selectData" class="demo-form-inline">
    <el-form-item label="标题">
      <el-input v-model="selectData.title" placeholder="请输入关键词" />
    </el-form-item>
    <el-form-item label="详情">
      <el-input v-model="selectData.introduce" placeholder="请输入关键词" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
        </div>
    <el-table border style="width: 100%" :data="dataList.comList">
    <el-table-column prop="id" label="编号" width="180" />
    <el-table-column prop="title" label="标题" width="180" />
    <el-table-column prop="introduce" label="详情" />
  </el-table>
  <!-- size-change 和 current-change 事件来处理页码大小和当前页变动时候触发的事件。 -->
  <el-pagination @current-change='currentChange' @size-change='sizeChange' layout="prev, pager, next" :total="selectData.count*2" />
    </div>
</template>

<script lang="ts">
import { getGoodsList } from '@/request/api'
import { InitData, ListInt } from '@/type/goods'
import { computed } from '@vue/reactivity'
import { dataType } from 'element-plus/es/components/table-v2/src/common'
import { defineComponent, onMounted, reactive, toRefs ,watch} from 'vue'

export default defineComponent({
    setup () {
      const data=reactive(new InitData())
        onMounted(()=>{
            getGoods()
        })
        const getGoods=()=>{
            getGoodsList().then(res=>{
                // console.log(res);
                data.list=res.data
                data.selectData.count=res.data.length
            })
        }
        const onSubmit=()=>{
          // console.log(data.selectData.title);
          //定义数组用来接收查询过后的要展示的数据
          let arr:ListInt[]=[];
          if(data.selectData.title||data.selectData.introduce){//判断两者之一是否为空 若不为空则进行下一步
          if(data.selectData.title){
            // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
            arr=data.list.filter((value)=>{
              // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
              // 如果要检索的字符串值没有出现，则该方法返回 -1。
              return value.title.indexOf(data.selectData.title)!=-1
            })
          }
          if(data.selectData.introduce){
            // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
            arr=data.list.filter((value)=>{
              // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
              // 如果要检索的字符串值没有出现，则该方法返回 -1。
              return value.introduce.indexOf(data.selectData.introduce)!=-1
            })
          }
          }else{
            arr=data.list
          }
          data.selectData.count=arr.length
          data.list=arr
        };
        const currentChange=(page:number)=>{
          data.selectData.page=page//显示当前页码
        }
        const sizeChange=(pagesize:number)=>{
          data.selectData.pagesize=pagesize//当前页码显示数据条数
        }
        // 定义计算属性
        //页码变化时调用
        const dataList=reactive({
          comList:computed(()=>{
              return data.list.slice((data.selectData.page-1)*data.selectData.pagesize,data.selectData.page*data.selectData.pagesize)
          })
        })
        watch([()=>data.selectData.title,()=>data.selectData.introduce],()=>{
            if(data.selectData.title==""&&data.selectData.introduce==""){
              getGoodsList().then(res=>{
                data.list=res.data
                data.selectData.count=res.data.length
              });
            }
          }
        )
        return {...toRefs(data),onSubmit,currentChange,sizeChange,dataList}
    }
})
</script>

<style scoped>

</style>